<template>
	<view class="layout">
		<text>手机快捷登录</text>
		<view class="content">
			<form @submit="onSubmit">
				<view class="item">
					<input v-model="formValue.MobilePhoneNumber" type="text" name="MobilePhoneNumber"
						placeholder="请输入手机号" />
				</view>
				<view class="verify">
					<input v-model="formValue.Captcha" type="text" name="Captcha" placeholder="请输入验证码" />
					<uni-button :plain="true" class="no-border">获取验证码</uni-button>
				</view>
				<view class="item">
					<button form-type="submit" type="primary" disabled="!inDisabled(key)">登录</button>
				</view>
			</form>
		</view>

		<view class="checkbox-container" @tap="toggleAgreement">
			<view class="checkbox" :class="{checked:isAgreed}"></view>
			<view class="article">
				<text class="label">已阅读并同意劳务通《用户协议及隐私政策》</text>
			</view>
			
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const isAgreed = ref(false);
	//判断用户点击状态
	function toggleAgreement() {
		isAgreed.value = !isAgreed.value;
	}


	const formValue = ref({
		MobilePhoneNumber: "",
		Captcha: ""
	});

	// 判断提交按钮是否禁用  
	const isDisabled = () => {
		for (let key in formValue.value) {
			if (!formValue.value[key]) {
				return true;
			}
		}
		return false;
	};
	// 点击提交  
	const onSubmit = () => {

	};
</script>

<style lang="scss" scoped>
	.layout {
		padding: 12vh 50rpx;

		text {
			font-size: 45rpx;
			font-weight: bold;
			margin-bottom: 50rpx;
		}

		.content {

			margin-top: 150rpx;

			.verify {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 60rpx;
				border-bottom: 1px solid #ccc;
                padding-bottom: 20rpx;
				.no-border {
					border: none;
					background-color: transparent;
				}
			}

			.item {
				padding-bottom: 40rpx;

				input {
					border-bottom: 1px solid #ccc;
					height: 80rpx;
				}

				button {
					margin-top: 150rpx;
				}
			}

		}

		.checkbox-container {
			display: flex;
			justify-content: center;
			margin-top: 10rpx;
			margin-bottom: 20rpx;

			.checkbox {
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
				border: 1px solid #ccc;
				display: flex;
				justify-content: center;
				margin-top: 5rpx;
				margin-right: 5rpx;
			}

			.checkbox.checked {
				border-color: #ccc;
				background-color: #fff;
				position: relative;
			}

			.checkbox.checked::after {
				content: '';
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 10rpx;
				height: 10rpx;
				border-radius: 50%;
				background-color: #464f58;
			}
			.article{
				.label{
					display: flex;
					align-items: center;
					color: #ccc;
					font-size: 25rpx;
			  }
			}
			
		}


	}
</style>